<template>
	<view class="container" :style="{height:isShowMaiLunDetail?'100vh':'100%'}">
		<navigationBar :myProperty="propertyInfo"></navigationBar>
		<view class="mailun-r-result-bg"
			:style="{backgroundImage:'url('+(addAddressText?mlrr_take_after_bg_new_bg: mailun_r_result_bg)+')',height:addAddressText?'2406rpx':'1624rpx'}">
			<view class="mailun-loading">
				<mai-lun-loading :lineList="lineList" :titleP="startLunList[0].text"></mai-lun-loading>
			</view>
			<view class="rr-default-box" :style="{backgroundImage:'url('+mlrr_default_bg+')'}"
				v-if="!pageLoading&&!addAddressText">
				<image :src="mlrr_fz" mode="" class="mlrr-fz"></image>
				<view class="ml-title">{{startLunList[0].text}}</view>
				<view class="ml-tip">{{startLunList[0]['ml-title']}}</view>
				<image :src="mlrr_jxtzph" mode="" class="mlrr-jxtz"></image>
				<image :src="mailun_r_result_default_sj" mode="" class="mlrr-default-sj shake-img"></image>
				<view class="mlrr-detail-btn" :style="{backgroundImage:'url('+mlrr_detail_btn+')'}" @click="lookDetail">
					<view>{{startLunList[0].text}}详情</view>
					<image :src="mlrr_detail_jt" mode="" class="mlrr-detail-jt"></image>
				</view>
			</view>

			<view class="rr-default-box" style="height: 1221rpx;"
				:style="{backgroundImage:'url('+mlrr_take_after_bg+')'}" v-if="!pageLoading&&addAddressText">
				<image :src="mlrr_fz" mode="" class="mlrr-fz"></image>
				<view class="ml-title" style="color: #fff;">{{startLunList[0].text}}</view>
				<view class="ml-tip" style="color: #fff;">{{startLunList[0]['ml-title']}}</view>
				<image :src="mlrr_jxtzph" mode="" class="mlrr-jxtz"></image>
				<image :src="startLunList[0].shopImg" mode="aspectFill" class="mlrr-default-sj-default"></image>
				<view class="mlri-shop-title">{{startLunList[0].shopTitle}}</view>
				<view style="margin-top: 140rpx;">
					<view v-for="(item,index) in startLunList[0].concatList" :key="index" class="ra-text flex-vc limit-text-single-line">
						<span style="margin-right: 12rpx;font-weight: bold;">{{item.split('｜')[0]}}</span>|<span style="margin-left: 12rpx;">{{item.split('｜')[1]}}</span>
					</view>
				</view>
				<view class="mlrr-detail-btn" :style="{backgroundImage:'url('+mlrr_detail_btn+')'}" @click="lookDetail">
					<view>{{startLunList[0].text}}详情</view>
					<image :src="mlrr_detail_jt" mode="" class="mlrr-detail-jt"></image>
				</view>
			</view>

			<view :class="[!addAddressText?'bottom-btn':'bottom-btn-take-after']"
				:style="{backgroundImage:`url(${!addAddressText?mlr_start:mlrr_take_after_btn})`}" @click="addAddress"
				v-if="!pageLoading&&!isShowTakeAnim">
				<view>{{addAddressText?addAddressText:'领取我的水晶'}}</view>
				<view v-if="!addAddressText">{{'平衡我的'+startLunList[0].text}}</view>
			</view>

			<image class="mlr-male-ic" :src="maiLunSex=='1'?mlr_male_ic:mlr_fmale_ic" />
			<view class="user-info">
				<view class="ui-name">{{getUserInfo.nickName}}</view>
				<view class="ui-time-title">测算时间：</view>
				<view class="ui-time">{{resultDetails.dateTime}}</view>
			</view>
		</view>
		<image v-if="!pageLoading&&addAddressText" :src="startLunList[0].detailImg" mode="widthFix" style="width: 100%;min-height: 10000rpx;margin-top: -400rpx;position: relative;" ></image>
		<u-popup :show="isShowMaiLunDetail" mode="center" @close="closeHandle" bgColor="transparent">
			<view class="pop-center-box" @click="closeHandle()">
				<view class="mlrr-detail-btn-pop flex-cc" :style="{backgroundImage:'url('+mlrr_detail_btn+')'}">
					脉轮详情
				</view>
				<view class="pop-content">
					<view class="pop-content-info">{{startLunList[0]['ml-info']}}</view>
					<image src="/static/images/ic_pop_close.png" class="pop-close" mode=""></image>
				</view>
			</view>
		</u-popup>

	</view>
</template>

<script>
	import maiLunLoading from '@/components/mai-lun-loading/mai-lun-loading.vue'
	import {
		mapGetters
	} from 'vuex'
	import {
		editMerchandiseReport,
		getMerchandiseReportId
	} from '@/common/api/index_api.js'

	export default {
		props: {
			pageData: {
				type: Object,
				default: null
			}
		},
		components: {
			maiLunLoading
		},
		data() {
			return {
				isShowMaiLunDetail: false,
				propertyInfo: {
					"bg_color": "transparent",
					"color": "#fff",
					"flag": 4,
					"name": "",
					"hasEntity": false,
				},
				xiaoCiR: this.$imgWxkjUrl + '/product/result/xiaoci/r_', //消磁套图
				maiLunSex: 0,
				mlrr_take_after_btn: this.$imgWxkjUrl + '/product/resultNew/mlrr_take_after_btn.png',
				mailun_r_result_bg: this.$imgWxkjUrl + '/product/resultNew/mailun_r_result_bg.png',
				mailun_r_result_default_sj: this.$imgWxkjUrl + '/product/resultNew/mailun_r_result_default_sj.png',
				mlrr_detail_btn: this.$imgWxkjUrl + '/product/resultNew/mlrr_detail_btn.png',
				mlrr_detail_jt: this.$imgWxkjUrl + '/product/resultNew/mlrr_detail_jt.png',
				mlrr_fz: this.$imgWxkjUrl + '/product/resultNew/mlrr_fz.png',
				mlrr_default_bg: this.$imgWxkjUrl + '/product/resultNew/mlrr_default_bg.png',
				mlrr_jxtzph: this.$imgWxkjUrl + '/product/resultNew/mlrr_jxtzph.png',
				mlrr_take_after_bg: this.$imgWxkjUrl + '/product/resultNew/mlrr_take_after_bg_new.png',
				mlrr_take_after_bg_new_bg: this.$imgWxkjUrl + '/product/resultNew/mlrr_take_after_bg_new_bg.png',

				mlr_jt_left: this.$imgWxkjUrl + '/product/result/mlr_jt_left.png',
				mlr_jt_right: this.$imgWxkjUrl + '/product/result/mlr_jt_right.png',
				mlr_male_bg: this.$imgWxkjUrl + '/product/result/mlr_male_bg.png',
				mlr_male_ic: this.$imgWxkjUrl + '/product/result/mlr_male_ic.png',
				closeImg: this.$imgWxkjUrl + '/product/result/mlr_lock.png',
				mlr_fmale_bg: this.$imgWxkjUrl + '/product/result/mlr_fmale_bg.png',
				mlr_fmale_ic: this.$imgWxkjUrl + '/product/result/mlr_fmale_ic.png',
				mrl_retest: this.$imgWxkjUrl + '/product/result/mrl_retest.png',
				mlr_start: this.$imgWxkjUrl + '/product/result/mlr_start_new.png',
				bg1: this.$imgWxkjUrl + '/product/result/bg1.png',
				bg2: this.$imgWxkjUrl + '/product/result/bg2.png',
				bg3: this.$imgWxkjUrl + '/product/result/bg3.png',
				bg4: this.$imgWxkjUrl + '/product/result/bg4.png',
				detailBtn: this.$imgWxkjUrl + '/product/result/detail_btn.png',
				detailDown: this.$imgWxkjUrl + '/product/result/down.png',
				detailUp: this.$imgWxkjUrl + '/product/result/up.png',
				normalImg: this.$imgWxkjUrl + '/product/result/normal.png',
				activeImg: this.$imgWxkjUrl + '/product/result/active.png',




				scloReportDetail: null,
				resultDetails: null,
				lineList: [],
				startLunList: [],
				currentIndex: 0,
				haveClose: false,
				haveMiddle: false,
				haveActive: false,
				detailShow: false,
				addAddressText: '',
				isShowTakeAnim: false,
				pageLoading: true
			}
		},
		computed: {
			...mapGetters('user', ['uGender'])
		},
		watch: {
			pageData: {
				handler(val) {
					if (val) {
						this.maiLunSex = this.uGender || 0
						const resultDetails = val.resultDetails
						this.resultDetails = resultDetails
						if (this.resultDetails.scloReportDetail) {
							this.scloReportDetail = JSON.parse(this.resultDetails.scloReportDetail);
						}
						this.lineList = []
						if (this.resultDetails.resultList && this.resultDetails.resultList.length > 0) {
							this.resultDetails.resultList.map((item, index) => {
								let resultDesc = JSON.parse(item.resultDesc)
								const qujianArr = this.resultDetails.resultSetMap.find(({
									dmnsName
								}) => dmnsName === item.dmnsName).qujian.split(',')
								resultDesc.height = Math.floor(item.score / (+(qujianArr[qujianArr.length - 1]) -
									1) * 100)
								this.lineList.push(resultDesc)
							})
						}

						this.startLunList = []
						let startLineList = JSON.parse(JSON.stringify(this.lineList));

						this.haveClose = false;
						this.haveMiddle = false;
						this.haveActive = false;
						startLineList.map(item => {
							if (item.status == '0') {
								this.haveClose = true
							} else if (item.status == '1') {
								this.haveMiddle = true;
							} else {
								this.haveActive = true
							}
						})
						let myArray = []; //记录符合条件的数据
						if (this.haveClose) {
							startLineList.map(item => {
								if (item.status == '0') {
									myArray.push(item);
								}
							})
						} else if (this.haveActive) {
							let haveActiveList = startLineList.sort((a, b) => b.height - a.height);
							let itemActive = haveActiveList[0]
							haveActiveList.map(item => {
								if (itemActive.height == item.height) {
									myArray.push(item)
								}
							})
						} else {
							let haveMiddleList = startLineList.sort((a, b) => a.height - b.height);
							let itemMiddle = haveMiddleList[0]
							haveMiddleList.map(item => {
								if (itemMiddle.height == item.height) {
									myArray.push(item)
								}
							})
						}

						this.startLunList.push(myArray[0]);
						this.resultDetails.dateTime = uni.$u.timeFormat(this.resultDetails.createDate, 'yyyy年mm月dd日')
						this.$forceUpdate();
						editMerchandiseReport({
							merchandiseReportId: this.resultDetails.id
						}).then(res => {

						})
						getMerchandiseReportId({
							merchandiseReportId: this.resultDetails.id
						}).then(res => {
							res = res.data;
							if (res.code == 200 && res.data && res.data.virtualGoodsUid) {
								if (res.data.addressId) {
									this.addAddressText = '查看收货地址'
								} else {
									this.addAddressText = '填写收货地址'
								}
							}
							this.pageLoading = false;
						})
					}
				},
				immediate: true,
				deep: true
			}
		},
		created() {
			uni.$on('updateMaiLunAddress', (addressId) => {
				this.addAddressText = '查看收货地址'
				editMerchandiseReport({
					merchandiseReportId: this.resultDetails.id,
					addressId: addressId
				})
			})
		},
		destroyed() {
			uni.$off('updateMaiLunAddress')
		},
		methods: {
			lookDetail() {
				this.isShowMaiLunDetail = true;
			},
			closeHandle() {
				this.isShowMaiLunDetail = false;
			},
			addAddress() {
				if (this.isShowTakeAnim) return
				if (this.$fangBaoClick()) return
				if (this.addAddressText) {
					let isFirstAddAddress = this.addAddressText == '查看收货地址' ? 'N' : 'Y';
					uni.navigateTo({
						url: '/subcontractorMaiLun/pages/maiLunAddress/maiLunAddress?reportId=' + this
							.resultDetails.id + '&isFirstAddAddress=' + isFirstAddAddress
					})
				} else {
					this.addAddressText = '填写收货地址'
					editMerchandiseReport({
						merchandiseReportId: this.resultDetails.id,
						virtualGoodsUid: this.startLunList[0].productId
					}).then(res => {
						res = res.data
						if (res.code == 200) {
							this.isShowTakeAnim = true;
							setTimeout(() => {
								this.isShowTakeAnim = false;
								this.$showToast('成功领取水晶')
							}, 2000)
						} else {
							this.$showToast(res.message)
						}
					})
				}

			},
			shuffleArray(array) {
				const newArray = [...array]; // 创建副本以避免修改原数组
				for (let i = newArray.length - 1; i > 0; i--) {
					const j = Math.floor(Math.random() * (i + 1)); // 随机索引
					[newArray[i], newArray[j]] = [newArray[j], newArray[i]]; // 交换元素
				}
				return newArray;
			},
			bindentersuccess(event) {
				this.$u.api.addLog({
					sourseType: 999
				})
			},
			bindentererror(event) {
				this.$showToast("请及时联系客服" + event.detail.code)
				this.$u.api.addLog({
					sourseType: 998
				})
			},
			setCurrentIndex(e) {
				console.log(e)
				this.currentIndex = e.detail.current
			},
			preIndex() {
				if (this.currentIndex == 0) {
					this.$showToast('已是第一个')
					return
				}
				this.currentIndex--;
			},
			nextIndex() {
				if (this.currentIndex == this.lineList.length - 1) {
					this.$showToast('已是最后一个')
					return
				}
				this.currentIndex++;
			},
			goRetest() {
				uni.navigateTo({
					url: '/subcontractorMaiLun/pages/introduce/introduce?sclId=' + this.resultDetails.sclId
				})
			},
			getStatusName(status) {
				switch (status) {
					case 0:
						return '已关闭'
					case 1:
						return '正常'
					case 2:
						return '过于活跃'
					default:
						return ''
				}
			},
			getStatusImg(status) {
				switch (status) {
					case 0:
						return this.closeImg
					case 1:
						return this.normalImg
					case 2:
						return this.activeImg
					default:
						return ''
				}
			},
			viewDetail() {
				this.detailShow = !this.detailShow
			},
		},
		mounted() {
			uni.setNavigationBarColor({
				frontColor: '#ffffff',
				backgroundColor: '#000000'
			})
		},
		beforeDestroy() {
			uni.setNavigationBarColor({
				frontColor: '#000000',
				backgroundColor: '#ffffff'
			})
		}
	}
</script>

<style lang="scss" scoped>
	.ra-text{
		width: 100%;
		font-size: 28rpx;
		color: #FFFFFF;
		line-height: 60rpx;
		padding-left: 93rpx;
		box-sizing: border-box;
	}
	.mailun-r-result-bg {
		width: 100%;
		background-size: 100% 100%;
		position: relative;
	}

	.take-anim {
		width: 350rpx;
		height: 350rpx;
		display: block;
		animation: fadeScale 2s ease-in-out forwards;
	}

	@keyframes fadeScale {
		0% {
			transform: scale(0.5);
			opacity: 0;
		}

		100% {
			transform: scale(1);
			opacity: 1;
		}
	}

	@keyframes move {

		0%,
		50%,
		100% {
			transform: translateY(0);
		}

		25% {
			transform: translateY(-25rpx);
		}

		75% {
			transform: translateY(25rpx);
		}
	}

	.bottom-btn {
		width: 466rpx;
		height: 166rpx;
		display: block;
		margin: 0 auto;
		font-weight: bold;
		font-size: 36rpx;
		color: #FFF4AE;
		letter-spacing: 3rpx;
		background-size: 100% 100%;
		display: flex;
		flex-direction: column;
		align-items: center;
		position: fixed;
		left: 50%;
		transform: translateX(-50%);
		bottom: 55rpx;
		padding-top: 18rpx;
		box-sizing: border-box;
	}

	.bottom-btn-take-after {
		width: 460rpx;
		height: 126rpx;
		display: block;
		margin: 0 auto;
		font-weight: bold;
		font-size: 36rpx;
		color: #FFF4AE;
		letter-spacing: 3rpx;
		background-size: 100% 100%;
		display: flex;
		flex-direction: column;
		align-items: center;
		position: fixed;
		left: 50%;
		transform: translateX(-50%);
		bottom: 55rpx;
		padding-top: 24rpx;
		box-sizing: border-box;
		z-index: 10;
	}


	.user-info {
		position: absolute;
		left: 20rpx;
		top: 251rpx;
		font-size: 26rpx;
		color: #FFFFFF;
		line-height: 50rpx;
		letter-spacing: 2rpx;
		z-index: 5;
	}



	.mlr-male-ic {
		width: 90rpx;
		height: 140rpx;
		top: 228rpx;
		right: 53rpx;
		position: absolute;
		animation: move 4s linear infinite;
		z-index: 5;
	}

	.mailun-loading {
		position: absolute;
		top: 360rpx;
		width: 100%;
		z-index: 3;
	}

	.rr-default-box {
		width: 750rpx;
		height: 826rpx;
		background-size: 100% 100%;
		position: absolute;
		left: 0;
		top: 736rpx;
	}

	.mlrr-fz {
		width: 144rpx;
		height: 144rpx;
		display: block;
		margin: 0 auto;
	}

	.mlrr-detail-btn {
		width: 206rpx;
		height: 58rpx;
		background-size: 100% 100%;
		font-size: 28rpx;
		line-height: 40rpx;
		color: #FFFFFF;
		position: absolute;
		right: 71rpx;
		top: 58rpx;
		padding-left: 24rpx;
		padding-top: 7rpx;
		box-sizing: border-box;
	}

	.mlrr-detail-btn-pop {
		width: 240rpx;
		height: 58rpx;
		background-size: 100% 100%;
		font-size: 34rpx;
		line-height: 48rpx;
		color: #FFFFFF;
		margin: 0 auto;
	}

	.pop-center-box {
		padding-top: 606rpx;
		box-sizing: border-box;
	}

	.pop-content {
		width: 586rpx;
		min-height: 290rpx;
		background: linear-gradient(180deg, #99F2F2 0%, #8365F5 100%);
		border-radius: 10rpx;
		padding: 90rpx 0;
		box-sizing: border-box;
		position: relative;
		margin-top: -49rpx;
		z-index: -1;
	}

	.pop-close {
		width: 40rpx;
		height: 40rpx;
		position: absolute;
		right: 20rpx;
		top: 20rpx;
	}

	.pop-content-info {
		width: 477rpx;
		font-size: 34rpx;
		color: #FFFFFF;
		line-height: 50rpx;
		letter-spacing: 3rpx;
		text-align: justify;
		margin: 0 auto;
	}

	.mlrr-detail-jt {
		position: absolute;
		right: 18rpx;
		top: 14rpx;
		width: 27rpx;
		height: 27rpx;
	}

	.ml-title {
		font-size: 40rpx;
		color: #9777F3;
		line-height: 56rpx;
		width: 100%;
		text-align: center;
		font-style: normal;
	}

	.ml-tip {
		width: 670rpx;
		font-weight: bold;
		font-size: 50rpx;
		color: #9777F3;
		line-height: 70rpx;
		text-align: center;
		margin: 0 auto;
	}

	.mlrr-jxtz {
		width: 670rpx;
		height: 76rpx;
		display: block;
		margin: 0 auto;
	}

	.mlrr-default-sj {
		width: 470rpx;
		height: 420rpx;
		display: block;
		margin: 0 auto;
		margin-top: -38rpx;
	}

	.shake-img {
		animation: shake 1s infinite;
		/* 每 2s 循环一次 */
	}

	@keyframes shake {

		0%,
		50% {
			transform: translateX(0);
		}

		/* 前 50% 时间静止（1s）*/
		55%,
		60% {
			transform: translateX(-5px);
		}

		/* 抖动 */
		65%,
		70% {
			transform: translateX(5px);
		}

		75%,
		80% {
			transform: translateX(-5px);
		}

		85%,
		90% {
			transform: translateX(5px);
		}

		95%,
		100% {
			transform: translateX(0);
		}
	}

	.mlrr-default-sj-default {
		width: 350rpx;
		height: 350rpx;
		display: block;
		margin: 0 auto;
		margin-top: -38rpx;
		animation: fadeScale 2s ease-in-out forwards;
	}

	.mlri-shop-title {
		font-size: 32rpx;
		color: #FFFFFF;
		line-height: 45rpx;
		letter-spacing: 3rpx;
		width: 100%;
		text-align: center;
	}
</style>